<template>
	<view class="addhouse_page">
		<view class="header">
			<option-state @change="switchIndex" :active="active"></option-state>
			<view class="house_name">
				{{info.name}}
			</view>
		</view>

		<view class="addhouse_body">
			<view class="container">
				<!-- 输入框 -->
				<u--form labelPosition="left" :model="model1" ref="uForm" labelWidth="100">
					<u-form-item label="房东姓名" borderBottom>
						<u--text suffixIcon="search" align="right" iconStyle="font-size: 40rpx" :text="landlord.landlordName || '搜索姓名或手机号'"  @click="searchLandlord"></u--text>
					</u-form-item>
					<u-form-item label="房东手机号" borderBottom>
						<u--input v-model="landlord.landlordPhone" :disabled="true" disabledColor='#fff' border="none"
							type="number" placeholder="房东手机号" inputAlign="right"></u--input>
					</u-form-item>
					<u-form-item label="幢号/栋号" borderBottom>
						<u--input v-model="model1.userInfo.buildingNumber" @blur="BuilddingOnKeyInput" border="none" type="text"
							placeholder="请输入幢号/栋号" :maxlength="4" inputAlign="right"></u--input>
					</u-form-item>
					<u-form-item label="单元号" borderBottom>
						<u--input v-model="model1.userInfo.unitNumber" border="none" :maxlength="1" placeholder="请输入单元号" type="number"
							maxlength="1" inputAlign="right"></u--input>
					</u-form-item>


					<u-form-item label="门牌号" borderBottom>
						<u--input v-model="model1.userInfo.ventricleNumber" @blur="ventricleNumberOnKeyInput" border="none" :maxlength="6" placeholder="请输入门牌号"
							type="text" inputAlign="right"></u--input>
					</u-form-item>


					<u-form-item label="楼层" prop="userInfo.floor" borderBottom>

						<template slot="right">
							<view class="slot_floor">
								<view :class="['item', acyiveFloor == 1 ? 'active_floor' :'']" @click="acyiveFloor = 1">
									电梯
								</view>
								<view :class="['item', acyiveFloor == 0 ? 'active_floor' :'']" @click="acyiveFloor = 0">
									楼梯
								</view>
							</view>
						</template>
						<br />
						<u-cell :border="false" :value="floorName" :isLink="true" arrow-direction="right"
							@click="changeFloor"></u-cell>
					</u-form-item>
					<u-form-item label="整套面积" borderBottom v-show="active == 1">
						<u--input v-model="model1.userInfo.area" border="none" type="number" placeholder="请输入面积"
							inputAlign="right"></u--input>
						<template slot="right">
							<view>m²</view>
						</template>
					</u-form-item>
					<u-form-item label="房屋类型" borderBottom>
						<template slot="right">
							<view class="" style="width: 300rpx;">
								<uni-data-select v-model="model1.userInfo.buildingType || '请选择'"
									:localdata="buildingTypeRange" @change="model1.userInfo.buildingType = $event"
									:clear="false"></uni-data-select>
							</view>
						</template>
					</u-form-item>

					<u-form-item label="租金" borderBottom v-show="active == 1">
						<u--input v-model="model1.userInfo.rental" type="number" border="none" :maxlength="6" placeholder="请输入租金"
							inputAlign="right"></u--input>
						<template slot="right">
							<view>元/月</view>
						</template>
					</u-form-item>
					<u-form-item label="付款方式" borderBottom>
						<template slot="right">
							<view class="" style="width: 300rpx;">
								<uni-data-select v-model="model1.userInfo.rentalMode || '请选择'"
									:localdata="rentalModeRange" @change="model1.userInfo.rentalMode = $event"
									:clear="false"></uni-data-select>
							</view>
						</template>
					</u-form-item>
					<u-form-item label="出租状态" borderBottom v-show="active==1">
						<template slot="right">
							<view class="slot_floor">
								<view :class="['item', rentState == 0 ? 'active_floor' :'']" @click="rentState = 0">未租
								</view>
								<view :class="['item', rentState == 1 ? 'active_floor' :'']" @click="rentState = 1">已租
								</view>
							</view>
						</template>
					</u-form-item>
					<u-form-item label="看房钥匙" borderBottom>
						<template slot="right">
							<view class="" style="width: 300rpx;">
								<uni-data-select v-model="model1.userInfo.houseKey || '请选择'" :localdata="houseKeyRange"
									@change="activeHouseKey" :clear="false"></uni-data-select>
							</view>
						</template>
					</u-form-item>
					<u-form-item :label="lableName" borderBottom v-show="keyIsShow">
						<!-- <u--textarea v-model="model1.userInfo.remark" placeholder="请输入内容"></u--textarea> -->
						<u--input v-model="model1.userInfo.remark" border="none" placeholder="请输入内容"
							inputAlign="right"></u--input>
					</u-form-item>

					<u-form-item label="带看联系人" borderBottom>


						<u-cell-group :border="false" slot="right">
							<u-cell :border="false" title="添加带看联系人" :isLink="true" arrow-direction="right"
								@click="tackLookIsShow = true"></u-cell>
						</u-cell-group>
					</u-form-item>
					<u-collapse v-show="tackLookInfoList.length != 0">
						<u-collapse-item title="带看人信息" name="Docs guide">
							<u-form-item label="姓名" borderBottom>
								<u--input v-model="tackLookInfo.name" border="none" placeholder="" disabled :cursorSpacing="cursorSpacing"></u--input>
							</u-form-item>
							<u-form-item label="手机号" borderBottom>
								<u-input v-model="tackLookInfo.phone" border="none" :maxlength="11" type="number" placeholder=""
									disabled :cursorSpacing="cursorSpacing"></u-input>
							</u-form-item>
						</u-collapse-item>
					</u-collapse>

					<u-form-item label="当前户型" borderBottom style="margin-top: 30rpx;">
						<template slot="right">
							<u-cell-group :border="false">
								<u-cell :border="false" :title="uninTypeTitlt" :isLink="true" arrow-direction="right"
									@click="changeUninType"></u-cell>
							</u-cell-group>
						</template>
					</u-form-item>
					<!-- 	<u-form-item label="房间A" borderBottom v-for="(item, index) of createRoomList">
					</u-form-item> -->
					<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
					<template v-if="active == 0">
						<view class="houseTypeList" style="margin-top: 30rpx;" v-for="(item, index) of createRoomList"
							:key="index">
							<u-form-item :label="'房间' + roomCode[index]" borderBottom>
								<template slot="right">
									<view class="slot_floor">
										<view :class="['item', item.rentState == 0 ? 'active_floor' :'']"
											@click="item.rentState = 0">
											未租
										</view>
										<view :class="['item', item.rentState == 1 ? 'active_floor' :'']"
											@click="disableInput(item,index)">
											已租
										</view>
									</view>
								</template>
							</u-form-item>
							<u-form-item label="几号房" borderBottom>
								<u--input v-model="item.roomNumber" @blur="onKeyInput" border="none" type="text" :maxlength="3"  placeholder="输入几号房"
									inputAlign="right"></u--input>
									<template slot="right">
										<view>号</view>
									</template>
							</u-form-item>

							<u-form-item label="单间面积" borderBottom>
								<u--input v-model="item.area" border="none" type="number" :maxlength="5" placeholder="请输入面积"
									inputAlign="right"></u--input>
								<template slot="right">
									<view>m²</view>
								</template>
							</u-form-item>
							<u-form-item label="卧型/朝向" borderBottom>
								<template slot="right">
									<u-cell-group :border="false">
										<u-cell :border="false" :title="item.facing ||'请选择'" :isLink="true"
											arrow-direction="right" @click="openSingleRoomMethod(index)"></u-cell>
									</u-cell-group>
								</template>
							</u-form-item>
							<u-form-item label="单间租金" borderBottom>
								<u--input v-model="item.rental" type="number" border="none" :maxlength="6" placeholder="请输入租金"
									inputAlign="right"></u--input>
								<template slot="right">
									<view>元/月</view>
								</template>
							</u-form-item>
							<!-- 短租费用 -->
							<u-form-item label="短租费用" borderBottom>
								<u--input v-model="item.shortRental" type="number" border="none" :maxlength="6" placeholder="请输入短租费用"
									inputAlign="right"></u--input>
								<template slot="right">
									<view>元/月</view>
								</template>
							</u-form-item>
						</view>
					</template>


				</u--form>
				<!-- 按钮 -->
				<view class="submint_btn">
					<view class="submin_box">
						<u-button color="#f05a23" text="确定" @click="leaseHouse"></u-button>
					</view>
				</view>
				<u-modal :show="modalShow" title="添加标签" showCancelButton @cancel="modalShow = false"
					@confirm="addConfirmTag">
					<u--input placeholder="最多可输入六个字" border="surround" v-model.trim="newTagname"
						maxlength="6"></u--input>
				</u-modal>
			</view>

		</view>

		<!-- 户型选择器 -->
		<u-picker :show="uninTypeIsShow" :columns="uninTypeList" @confirm="checkedUninTypeResult"
			@cancel="uninTypeIsShow = false" :closeOnClickOverlay="true"></u-picker>
		<!-- 单间 -->
		<u-picker :show="singleRoomIsShow" :columns="roomTypeAndDirection" @confirm="changeRoomTypeAndDirection"
			@cancel="singleRoomIsShow = false" :closeOnClickOverlay="true"></u-picker>
		<!-- 选择楼层 -->
		<u-picker :show="floorIsShow" :columns="floorTotalData" @confirm="confirmFloorMethod"
			@cancel="floorIsShow = false" :closeOnClickOverlay="true"></u-picker>
		<!-- 添加带看联系人 -->
		<!-- <u-overlay :show="tackLookIsShow" @click="tackLookIsShow = false">
				
			</u-overlay> -->
		<u-popup :show="tackLookIsShow" @close="tackLookIsShow = false" @open="tackLookIsShow = true">
			<view class="tack_look_box">
				<view class="header">
					<view class="close" @click="tackLookIsShow = false">
						取消
					</view>
					<view class="title">
						添加联系人
					</view>
					<view class="confirm" @click="confirmTackPropeo">
						确认
					</view>
				</view>
				<view class="body">
					<u--form labelPosition="left" :model="tackLookInfo" labelWidth="100">
						<u-form-item label="姓名" borderBottom ref="item1">
							<u--input v-model="tackLookInfo.name" border="none" clearable maxlength="4"></u--input>
						</u-form-item>
						<u-form-item label="手机号" borderBottom ref="item1">
							<u--input maxlength="11" v-model="tackLookInfo.phone" border="none" type="number"
								clearable></u--input>
						</u-form-item>
					</u--form>
				</view>
			</view>
		</u-popup>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import OptionState from "@/pages/home/components/optionState.vue";
	import {
		addHouseInfo, // 房东新增房源信息
	} from "@/api/home/index.js"
	import Upload from "@/components/Upload/index.vue"
	import uniDataSelect from "@/uni_modules/uni-select/index/index.vue"
	export default {
		onLoad(option) {
			if (option.info.includes('landlordId')) {
				//从搜索房东跳转而来
				this.landlord = JSON.parse(option.info);
			}
            var houseInfo = JSON.parse(uni.getStorageSync('houseInfo'));
			console.log(houseInfo,'3234')
			this.range = houseInfo.range;
			// this.rentalModeRange = houseInfo.rentalModeRange;
			this.houseKeyRange = houseInfo.houseKeyRange;
			this.bedroomTypeRange = houseInfo.bedroomTypeRange;
			this.buildingTypeRange = houseInfo.buildingTypeRange;
		},
		data() {
			return {
				cursorSpacing: 100,
				keyIsShow: false,
				landlord: {},
				info: JSON.parse(uni.getStorageSync('info')),
				label: '开锁密码',
				uninTypeTitlt: "请选择户型",
				uninTypeList: [
					['1室', '2室', '3室', '4室', '5室', '6室', '7室', '8室', '9室'],
					['0厅','1厅', '2厅', '3厅', '4厅', '5厅', '6厅', '7厅', '8厅', '9厅'],
					['0卫','1卫', '2卫', '3卫', '4卫', '5卫', '6卫', '7卫', '8卫', '9卫'],
				],
				active: uni.getStorageSync('activeHouseState') || 0,
				rentStateActive: 0,
				showIndex: 0,
				midelList: [],
				modalShow: false,
				newTagname: "",
				acyiveFloor: 1,
				rentState: 0,
				houseInfo: {},
				showSex: false,
				houseLabelList: [{
						labelName: "地铁"
					},
					{
						labelName: "电梯"
					},
					{
						labelName: "冰箱"
					},
					{
						labelName: "洗衣机"
					},
					{
						labelName: "空调"
					},
					{
						labelName: "独卫"
					},
				],
				model1: {
					userInfo: {
						buildingNumber: '',
						unitNumber: '',
						floor: '',
						area: '',
						ventricleNumber: '',
						roomNumber: '',
						bedroomType: '',
						houseType: '1',
						buildingType: '',
						stairType: '',
						rental: "",
						rentalMode: "",
						rentState: "",
						remark: "",
						mediaList: [{
							mediaLabel: "",
							mediaType: "",
							mediaUrl: "",
							isPoster: ""
						}],
						rentalType: '',
						communityId: '',
					},
				},
				radio: '',
				switchVal: false,
				buildingTypeRange: [],
				bedroomTypeRange: [],
				houseKeyRange: [],
				rentalModeRange: [{
						value: 1,
						text: "一月一付"
					},
					{
						value: 2,
						text: "二月一付"
					},
					{
						value: 3,
						text: "三月一付"
					},
					{
						value: 6,
						text: "半年一付"
					},
					{
						value: 12,
						text: "一年一付"
					}
				],
				range: [],
				createRoomList: [],
				roomTypeAndDirection: [
					['主卧', '次卧', '阳台房'],
					['东', '西', '南', '北'],
				],
				roomCode: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K'],
				uninTypeIsShow: false,
				singleRoomIsShow: false,
				activeRoomLeaseIndex: undefined,
				floorName: '选择楼层',
				floorIsShow: false,
				floorTotalData: [
					[],
					[]
				],
				tackLookIsShow: false,
				tackLookInfoList: [],
				tackLookInfo: {
					name: "",
					phone: ""
				},
				lableName: ""

			}
		},
		methods: {
			
			// 失去焦点兑换码验证
			onKeyInput() {
				const RoomObj=this.createRoomList
				for(let i=0;i<RoomObj.length;i++){
					let roomNumber=RoomObj[i].roomNumber
					console.log(roomNumber);
					if (roomNumber != '') {
						let flag=this.getCardTypeNumber(roomNumber);
						if(!flag){
							RoomObj[i].roomNumber='';
						}
					}
				}
			},
			BuilddingOnKeyInput(){
				
				console.log(this.model1.userInfo.buildingNumber);
				let buildingNum=this.model1.userInfo.buildingNumber;
				if (buildingNum != '') {
					let flag=this.getCardTypeBuilderNumber(buildingNum);
					if(!flag){
						this.model1.userInfo.buildingNumber='';
					}
				}
			},
			ventricleNumberOnKeyInput(){
				console.log(this.model1.userInfo.ventricleNumber);
				let ventricleNumber=this.model1.userInfo.ventricleNumber;
				if (ventricleNumber != '') {
					let flag=this.getCardTypeBuilderNumber(ventricleNumber);
					if(!flag){
						this.model1.userInfo.ventricleNumber='';
					}
				}
			},
			    // 房间号正则验证 必须是大写字母和数字组成
			getCardTypeNumber(value) {
						const reg = /^[0-9A-Z]+$/;
						if (!reg.test(value)) {
							uni.showToast({
								icon: 'none',
								title: '房间号只能输入大写字母和数字',
								duration: 2000,
								position: 'top',
							});
							return false
						} else {
							console.log('房间号格式正确');
							return true
						}
			},
			// 楼栋号正则验证 必须是大写字母和数字组成
			getCardTypeBuilderNumber(value) {
						const reg = /^[0-9A-Z]+$/;
						if (!reg.test(value)) {
							uni.showToast({
								icon: 'none',
								title: '楼栋号只能输入大写字母和数字',
								duration: 2000,
								position: 'top',
							});
							return false
						} else {
							console.log('楼栋号格式正确');
							return true
						}
			},
			
			disableInput(item,index){
			
				item.rentState = 1
				this.createRoomList.splice(index,1)
			},
			
			activeHouseKey(value) {
				if (value == 0) {
					this.lableName = '密码'
				} else if (value == 7) {
					this.lableName = '其他'
				}

				if (value == 0 || value == 7) {
					this.keyIsShow = true
				} else {
					this.keyIsShow = false
				}
				console.log(value);
				this.model1.userInfo.houseKey = value
			},
			confirmTackPropeo() {
				if (this.tackLookInfo.name == "" || this.tackLookInfo.phone == "") return this.$refs.uToast.show({
					message: '请完善信息',
					type: "error"
				})
				if (this.tackLookInfo.phone.length<11) return this.$refs.uToast.show({
					message: '请输入11位的手机号',
					type: "error"
				})
				const regex = /^1[3-9]\d{9}$/;
				if(!regex.test(this.tackLookInfo.phone)){
					
				}
				if (!regex.test(this.tackLookInfo.phone)) return this.$refs.uToast.show({
					message: '手机号格式不正确,请重新填写',
					type: "error"
				})
				this.tackLookInfoList.push(this.tackLookInfo);
				this.$refs.uToast.show({
					message: '添加成功',
					type: "success"
				})
				this.tackLookIsShow = false
			},

			confirmFloorMethod(list) {
				this.floorName = list.value.join('-');
				this.model1.userInfo.floor = list.value.join('-')
				this.floorIsShow = false
			},
			changeFloor() {
				this.floorIsShow = true
			},
			openSingleRoomMethod(index) {


				this.activeRoomLeaseIndex = index
				this.singleRoomIsShow = true
			},

			changeRoomTypeAndDirection(list) {

				this.createRoomList[this.activeRoomLeaseIndex].aspect = list.value[1];
				this.createRoomList[this.activeRoomLeaseIndex].bedroomType = list.value[0] == '主卧' ? 0 : 1;
				this.createRoomList[this.activeRoomLeaseIndex].facing = list.value.join('-')
				this.singleRoomIsShow = false
			},

			changeUninType() {
				this.uninTypeIsShow = true
			},

			checkedUninTypeResult(uninTypeList) {
				this.uninTypeTitlt = uninTypeList.value.join('');
				this.model1.userInfo.houseType = uninTypeList.value.join('')
				this.createRoomList = []
				var roomNum = Number(uninTypeList.value[0].charAt(0))

				for (let i = 0; i < roomNum; i++) {
					var obj = {
						roomNumber: "",
						bedroomType: "",
						aspect: "",
						area: "",
						rental: "",
						shortRental: "",
						rentState: 0
					}
					this.createRoomList.push(obj);

				}

				this.uninTypeIsShow = false
			},
			switchIndex(index) {

				this.active = index
				this.showIndex = index
			},

			navInputLease() {
				uni.navigateTo({
					url: '../inputlease/inputlease',
				})
			},
			async leaseHouse() {
				var houseitemList = []
				if (this.active == 0) {
					houseitemList = this.createRoomList;
				} else {
					//整租
					var houseItem = {
						roomNumber: this.model1.userInfo.roomNumber,
						bedroomType: this.model1.userInfo.bedroomType,
						aspect: "",
						area: this.model1.userInfo.area,
						rental: this.model1.userInfo.rental,
						shortRental: "",
						rentState: this.rentState
					}
					houseitemList.push(houseItem)
				}

                //带看联系人手机号校验
				

				const res = await addHouseInfo({
					landlordName: this.landlord.landlordName,
					landlordPhone: this.landlord.landlordPhone,
					userId: this.landlord.landlordId,
					communityId: this.info.id,
					rentalType: this.active,
					buildingNumber: this.model1.userInfo.buildingNumber,
					unitNumber: this.model1.userInfo.unitNumber,
					floor: this.model1.userInfo.floor,
					ventricleNumber: this.model1.userInfo.ventricleNumber,
					houseType: this.model1.userInfo.houseType,
					buildingType: this.model1.userInfo.buildingType,
					stairType: this.acyiveFloor,
					rentalMode: this.model1.userInfo.rentalMode,
					houseKey: this.model1.userInfo.houseKey,
					viewingContact: this.tackLookInfo.name,
					viewingContactPhone: this.tackLookInfo.phone,
					remark: this.model1.userInfo.remark,
					houseItemList: houseitemList
				})
				if (res.data.code != 200) return this.$refs.uToast.show({
					type: "error",
					message: res.data.msg
				})
				this.$refs.uToast.show({
					type: "success",
					message: "添加成功"
				})
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/house/index',
					})
				}, 1000)
			},

			addConfirmTag() {
				var value = this.newTagname.trim();
				if (value.length <= 6 && value.length != 0) {
					this.houseLabelList.push({
						labelName: value
					})
					this.modalShow = false
				} else {
					this.$refs.uToast.show({
						message: '内容不合法',
						type: 'error'
					})
				}
				this.newTagname = ""
			},
			addTag() {
				this.modalShow = true
			},
			changehouseType(data) {

				this.model1.userInfo.bedroomType = data
			},
			isVideoPath(path) {
				const videoExtensions = ['.mp4', '.avi', '.mov', '.wmv', '.mkv', '.flv', '.webm']; // 常见视频文件扩展名列表
				const extension = path.toLowerCase().split('.').pop(); // 获取路径中的扩展名部分，并转为小写

				return videoExtensions.includes(extension);
			},
			checkedImg(filelist) {

				this.midelList = []


				if (filelist.length != 0) {
					filelist.map((item, index) => {
						this.midelList.push({
							mediaLabel: "",
							mediaType: this.isVideoPath(item) ? 1 : 0,
							mediaUrl: item,
							isPoster: 0
						})
					})
				}

			},
			searchLandlord() {
				uni.navigateTo({
					url: '../../public/search/landlord'
				})
			},
			async validate() {
				await this.$refs.form.validate();
			}
		},
		onReady() {
			
			// this.$refs.uForm.setRules(this.rules);
		},
		mounted() {
			for (let i = 1; i <= 35; i++) {
				this.floorTotalData[0].push(`第${i}层`);
				this.floorTotalData[1].push(`共${i}层`);
			}


		},
		components: {
			"option-state": OptionState,
			Upload,
			uniDataSelect
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/styles/global.scss";
	@import "@/styles/index.scss";

	.addhouse_page {
		@include cover;
		@include boxSing;
		background-color: $pagebgc;

		.tack_look_box {
			width: 100%;
			height: 400rpx;
			background-color: #fff;

			.header {
				@include flexBetween;
				padding: 0 10rpx;
				box-sizing: border-box;

				.close {
					font-size: 35rpx;
					color: #767676;
				}

				.title {
					font-size: 35rpx;
				}

				.confirm {
					font-size: 35rpx;

				}
			}

			.body {
				margin-top: 40rpx;
				padding: 0 20rpx;
			}
		}

		.header {
			width: 100%;
			margin-top: 30rpx;
		}

		.house_name {
			width: 100%;
			text-align: center;
			margin: 30rpx 0;
			color: $theme;
			font-size: 30rpx;
		}

		.house_add_info {
			// padding: 30rpx;
			// margin-top: 130rpx;
			@include boxSing;
			background-color: #fff;
		}

		// .submin_box {
		// 	margin: 30rpx auto;
		// 	border-radius: 40rpx;
		// 	overflow: hidden;
		// 	width: 80%;

		// }

		.addhouse_body {
			padding: 30rpx;
			background-color: #fff;
		}
	}

	.submint_btn {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		border-top: 1px solid #b9b9b9;
		left: 0rpx;

		.submin_box {
			margin: 30rpx auto;
			border-radius: 40rpx;
			overflow: hidden;
			width: 80%;

		}
	}

	.item {
		// float: right;
		display: inline-block;
		padding: 6rpx 12rpx;
		border: 1rpx solid #cfcfcf;
		margin-left: 10rpx;
		border-radius: 10rpx;
		margin-top: 10rpx;
	}

	.active_floor {
		background-color: $theme;
		border: 1rpx solid $theme !important;
		color: #fff;
	}

	.container {
		margin-bottom: 140rpx;

		.landlordName {
			margin-left: auto;
			display: flex;
			align-items: center;
		}

		.slot_floor {
			width: 100%;
			height: auto;
		}

		.tag_box {
			width: 500rpx;
			word-wrap: break-word;
			float: right;
			height: auto;
			position: relative;
			box-sizing: border-box;
			overflow: hidden;

			// background-color: red;
			.add_tag {
				// position: absolute;
				margin-top: 20rpx;
				right: -15%;
				padding: 6rpx 12rpx;
				display: inline-block;
				// height: 100%;
				// width: 12%;
				margin-left: 10rpx;
				border-radius: 10rpx;
				top: 10rpx;
				background-color: $theme;
				color: #fff;
			}
		}
	}
</style>